<!-- 单文件组件 -->
<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" alt="">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
export default {
    name:"HomeSwiper",
    data(){
        return {
            swiperOption:{
                pagination:'.swiper-pagination',
                loop:true
            },
            swiperList: [{
                id:"0001",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/e7f3e77d97554ccd18c646d3a9530bf6.jpg_890x330_8cae093b.jpg'
            },{
                id:"0002",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/f57dd6499b548c6746bf02fb37331fb5.jpg_890x330_fa6053e8.jpg'
            },{
                id:"0003",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/69d69be30fa6d86f6428e936f1afaf17.jpg_890x330_6bf3a9f8.jpg'
            },{
                id:"0004",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/b221705ffe80df79c76408aa78bc466f.jpg_890x330_7cd41f6b.jpg'
            },{
                id:"0005",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/4cf92fd4010e46d9e2698e89d08c5708.jpg_890x330_3f24e836.jpg'
            },{
                id:"0006",
                imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/c0a0dd528b1a539d36dd7bebcbbb1e24.jpg_890x330_d9a9055f.jpg'
            }]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .wrapper >>> .swiper-pagination-bullet-active
        background:#fff !important
    .wrapper
        overflow:hidden
        width:100%
        height:0
        padding-bottom:38.25%
        background:#eee
        
        .swiper-img
            width:100%
</style>